import MysqlIcon from "@/pages/data-collect/data-source/icon/MysqlIcon";
import { SendOutlined } from "@ant-design/icons";
import { Button, Input, Select } from "knowdesign";
import React, { useState } from "react";
import IconRightArrow from "../IconRightArrow";
import "./index.less";

const App: React.FC = ({ setDetail }) => {
  const [select1Value, setSelect1Value] = useState(["MySQL"]);
  const [select2Value, setSelect2Value] = useState(["MySQL"]);

  const sourceChange = (value) => {
    console.log(value);
    setSelect1Value(value);
  };

  const endChange = (value) => {
    console.log(value);
    setSelect2Value(value);
  };

  const isButtonDisabled = !select1Value || !select2Value;
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      {/* <span>来源：</span> */}
      <Select
        showSearch
        placeholder="来源"
        defaultValue={select1Value}
        optionFilterProp="children"
        onChange={sourceChange}
        suffixIcon={<SendOutlined />}
        style={{ width: "42%" }}
        filterOption={(input, option) =>
          (option?.label ?? "")?.toLowerCase().includes(input.toLowerCase())
        }
      >
        <Option value="MySQL" key="MySQL">
          <MysqlIcon height="20px" width="20px" />
          <span style={{ marginLeft: 8 }}>MySQL</span>
        </Option>
      </Select>

      <div style={{ display: "flex", alignItems: "center", margin: "0 8px" }}>
        <IconRightArrow />
      </div>

      {/* <div style={{ display: "flex", alignItems: "center" }}>来源</div> */}
      <Select
        showSearch
        placeholder="去向"
        optionFilterProp="children"
        onChange={endChange}
        suffixIcon={<SendOutlined />}
        defaultValue={select2Value}
        style={{ width: "42%" }}
        filterOption={(input, option) =>
          (option?.label ?? "")?.toLowerCase().includes(input.toLowerCase())
        }
      >
        <Option value="MySQL" key="MySQL">
          <MysqlIcon height="20px" width="20px" />
          <span style={{ marginLeft: 8 }}>MySQL</span>
        </Option>
      </Select>

      <Button
        style={{ marginLeft: "1.5%", width: "13%" }}
        type="primary"
        disabled={isButtonDisabled}
        onClick={() => setDetail(true)}
      >
        开始创建
      </Button>
    </div>
  );
};

export default App;
